<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>专家分配</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318" />

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=318"></script>

    <style>
        .model-form-footer {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">
        <form class="layui-form" id="assignExpertForm">
            <div class="layui-form-item">
<!--                <label class="layui-form-label">选择专家</label>-->
                <div class="layui-input-inline" style="width: 100%;">
                    <table class="layui-table" id="expertTable" lay-filter="expertTable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>姓名</th>
                            <th>工作单位</th>
                            <th>职称</th>
                            <th>指导数量</th>
                            <th>剩余指导名额</th>
                        </tr>
                        </thead>
                        <tbody id="expertList">
                        <!-- Expert data will be populated here -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="assignExpertBtn">分配教师</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    layui.use(['form', 'table', 'layer', 'jquery'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            table = layui.table;

        // 获取专家数据
        $.ajax({
            url: '/expert/assignList',  // 后端接口
            type: 'GET',
            success: function (response) {
                if (response.code === 0) {
                    var experts = response.data; // 获取专家列表
                    var expertTableHtml = '';

                    // 渲染专家数据到表格
                    experts.forEach(function (expert) {
                        // 对每个字段进行检查和替换
                        var id = expert.id || "";
                        var name = expert.name || "";
                        var department = expert.department || "";
                        var title = expert.title || "";
                        var places = expert.places || 0;
                        var stuMaxNum = expert.stuMaxNum || 0;

                        expertTableHtml += `
                    <tr>
                        <td><input type="radio" name="expert" value="${id}" lay-skin="primary"></td>
                        <td>${name}</td>
                        <td>${department}</td>
                        <td>${title}</td>
                        <td>${places}</td>
                        <td>${stuMaxNum - places}</td>
                    </tr>
                `;
                    });

                    $('#expertList').html(expertTableHtml);
                    form.render();  // 渲染表单元素
                } else {
                    layer.msg('获取专家列表失败: ' + response.msg);
                }
            },
            error: function () {
                layer.msg('获取专家数据失败，请稍后再试！');
            }
        });

        var index = parent.layer.getFrameIndex(window.name);
        // 提交表单
        form.on('submit(assignExpertBtn)', function (data) {
            var selectedExpertId = $('input[name="expert"]:checked').val();  // 获取选中的专家ID

            if (!selectedExpertId) {
                layer.msg('请先选择专家');
                return false;
            }

            var selectedStudents = getQueryString('studentIds').split(',');
            var postData = {
                studentIds: selectedStudents,
                expertId: selectedExpertId
            };

            // 提交数据到后端
            $.ajax({
                type: 'POST',
                url: '/student/assignStudentToExpert',
                contentType: 'application/json',
                data: JSON.stringify(postData),
                dataType: 'json',
                success: function (response) {
                    if (response.code === 0) {
                        layer.msg(response.msg);
                        setTimeout(function () {
                            parent.layer.close(index);
                            $('#search',parent.document).click();
                        }, 1000);
                    } else {
                        layer.msg(response.msg, {icon: 2, anim: 6});
                    }
                },
                error: function (data) {
                    console.log(data);
                    layer.msg('网络错误，请稍后再试');
                }
            });

            return false;
        });
    });

    // 获取URL查询字符串
    function getQueryString(name) {
        var reg = new RegExp("([?&])" + name + "=([^&]*)", "i");
        var result = reg.exec(location.search);
        if (result) {
            return result[2];
        } else {
            return '';
        }
    }
</script>
</body>
</html>
